<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            111
            <button>按钮</button><span>内容</span>
        </li>
        <li>
            222
            <button>按钮</button><span>内容</span>
        </li>
        <li>
            333
            <button>按钮</button><span>内容</span>
        </li>
    </ul>
    <script>
        // 点击每个按钮的时候 按钮后面的span 会显示 再次点一下会隐藏；

        // 错误的写法： 一个flag 控制 三个显示隐藏会相互之间影响；
        // var flag = true;  // 控制 span显示或者隐藏的控件；

        // let lis = document.querySelectorAll("li");

        // lis.forEach(function(li){
        //     // console.log(li);
        //     var btn = li.querySelector("button");
        //     // console.log(btn);
        //     btn.onclick = function(){
        //         // console.log("点击了btn",this);
        //         if(flag){
        //             this.nextElementSibling.style.display = "none";
        //         }else{
        //             this.nextElementSibling.style.display = "inline-block";
        //         }
        //         flag = !flag;
        //     }
        // })


        // 方式一： 函数作用域 

        // let lis = document.querySelectorAll("li");
        // lis.forEach(function(li){
        //     var flag = true;  // 控制 span显示或者隐藏的控件；
        //     // console.log(li);
        //     var btn = li.querySelector("button");
        //     // console.log(btn);
        //     btn.onclick = function(){
        //         // console.log("点击了btn",this);
        //         if(flag){
        //             this.nextElementSibling.style.display = "none";
        //         }else{
        //             this.nextElementSibling.style.display = "inline-block";
        //         }
        //         flag = !flag;
        //     }
        // })



        // 方式二 ：

        let lis = document.querySelectorAll("li");
        lis.forEach(function(li){
            // console.log(li);
            var btn = li.querySelector("button");
            // console.dir(btn);
            btn.flag = true;
            console.dir(btn);
            btn.onclick = function(){
                // console.log("点击了btn",this);
                if(this.flag){
                    this.nextElementSibling.style.display = "none";
                }else{
                    this.nextElementSibling.style.display = "inline-block";
                }
                this.flag = !this.flag;
            }
        })

        /* 
            var obj1 = {
                flag:true
            }
        
            var obj2 = {
                flag:true
            }

            var obj3 = {
                flag:true
            }
        
        */



    </script>
</body>
</html>